<script>
	function search() {
		var id = document.getElementById("userId").value;
		document.location.href = "/cs/" + id;
	}

	function open_win() {
		var id = document.getElementById("userId").value;
		window.open("/cs/editUser/" + id, "아이템지급", "width=555,height=540,scrollbars=no,resizeable=no,left=50,top=50");
	}
</script>
<style>
.results1 {
	float: left;
	width: 35%;
	margin: 5px;
}

td,th {
	border: solid 1px;
	border-color: #D8D8D8;
	text-align: center;
}
</style>
{% include '/templates/cs_header.html' %}
<!-- Container -->
<div id="container1">
  <!-- Content -->
  <div id="content1" class="flex">
    <div>
      <h3>사용자정보</h3>
      <div id="user-info">
        <div style="margin-left: 30px;">
          <h4>
            앱 ID : <label style="width: 300px;"> </label> <input type="text" id="userId" value="{{userId}}" /> <img src="/static/img/search1.png" onclick="search()" style="cursor: pointer;" />
          {% if userId %} 
          <img src="/static/img/edit.png" onclick="open_win()" style="cursor: pointer;" />
          </h4>
          <div class="module1" id="changelist">
            <form id="list-form">
              <div class="results1">
                <table class="result_list">
                  <thead>
                    <tr>
                      <th scope="col" style="width: 200px; text-align: center;">구분</th>
                      <th scope="col" colspan="{{maxCol}}" style="width: 100px; text-align: center;">값</th>
                    </tr>
                  </thead>
                  <tbody>
                  	{% for userInfo in userInfos %}
                      <tr class="row{{ userInfo.index % 2 }}">
                        {% if userInfo.image %}
                          <th scope="col" style="text-align: center; vertical-align: middle;">{{userInfo.title}}</th>
                          <td scope="col" colspan="{{maxCol}}"><img src="{{userInfo.content}}" /></td>
                        {% elif userInfo.titles %}
                          <th scope="col" rowspan="2" style="text-align: center; vertical-align: middle;">{{userInfo.title}}</th>
                          {% for i in range(maxCol) %}
                            <th scope="col">{{userInfo.titles[i]}}</th>
                          {% endfor %}
                          <tr>
                            {% for i in range(maxCol) %}
                              <td scope="col">{{userInfo.contents[i]}}</td>
                            {% endfor %}
                          </tr>
                        {% else %} 
                          <th scope="col" style="text-align: center;">{{userInfo.title}}</th>
                          <td scope="col" colspan="{{maxCol}}">{{userInfo.content}}</td>
                        {% endif %}
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </form>
          </div>
        </div>
        <div id="content1" class="flex">
          <div class="module1" id="changelist">
            <form id="list-form">
              <div class="results1">
                <table class="result_list">
                  <thead>
                    <tr>
                      <th scope="col" colspan="5" style="text-align: center;">보유 캐릭터</th>
                    </tr>
                    <tr>
                      <th scope="col" style="text-align: center;">이름</th>
                      <th scope="col" style="width: 100px; text-align: center;">레벨</th>
                      <th scope="col" style="text-align: center;">경험치</th>
                      <th scope="col" style="text-align: center;">호감도</th>
                      <th scope="col" style="text-align: center;">행동별 쿨타임</th>
                    </tr>
                  </thead>
                  <tbody>
                  	{% for characterInfo in characterInfos %}
                      <tr class="row{{ characterInfo.index % 2 }}">
                        <td>{{characterInfo.name}}</td>
                        <td>{{characterInfo.level}}</td>
                        <td>{{characterInfo.exp}}</td>
                        <td>{{characterInfo.point}}</td>
                        <td>{{characterInfo.cooltimes}}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </form>
          </div>
        </div>
        <div id="content1" class="flex">
          <div class="module1" id="changelist">
            <form id="list-form">
              <div class="results1">
                <table class="result_list">
                  <thead>
                    <tr>
                      <th scope="col" colspan="2" style="text-align: center;">일일미션 정보</th>
                    </tr>
                    <tr>
                      <th scope="col" style="text-align: center;">이름</th>
                      <th scope="col" style="width: 100px; text-align: center;">상태</th>
                    </tr>
                  </thead>
                  <tbody>
                  	{% for a in d3 %}
                      <tr class="row{{ a.index % 2 }}">
                        <td>{{a.name}}</td>
                        <td>{{a.status}}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                  <thead>
                    <tr>
                      <th scope="col" colspan="2" style="text-align: center;">주간미션 정보</th>
                    </tr>
                    <tr>
                      <th scope="col" style="text-align: center;">이름</th>
                      <th scope="col" style="width: 100px; text-align: center;">상태</th>
                    </tr>
                  </thead>
                  <tbody>
                  	{% for a in w3 %}
                      <tr class="row{{ a.index % 2 }}">
                        <td>{{a.name}}</td>
                        <td>{{a.status}}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                  <thead>
                    <tr>
                      <th scope="col" colspan="2" style="text-align: center;">업적 정보</th>
                    </tr>
                    <tr>
                      <th scope="col" style="text-align: center;">이름</th>
                      <th scope="col" style="width: 100px; text-align: center;">상태</th>
                    </tr>
                  </thead>
                  <tbody>
                  	{% for a in achievements %}
                      <tr class="row{{ a.index % 2 }}">
                        <td>{{a.name}}</td>
                        <td>{{a.status}}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </form>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% include '/templates/cs_footer.html' %}